<template>
	<view class="container">
		<view class="index-head">
			<view class="head-title">图标数据</view>
		</view>
		<view class="dropdown">
			<u-dropdown ref="uDropdown" active-color="#333333" inactive-color="#929AA5" title-size="28" duration='0' menu-icon="arrow-down-fill">
				<u-dropdown-item v-model="well_site_active" :title="well_site_active_title">
					<view class="slot-content">
						<view :style="{color:item.id===well_site_active?'#333333':'#929AA5'}" class="u-text-center"
							v-for="(item,index) in well_site_list" :key="item.id" @click="selectItem(1,index)">
							{{item.name}}
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-model="well_head_active" :title="well_head_active_title">
					<view class="slot-content">
						<view :style="{color:item.id===well_head_active?'#333333':'#929AA5'}" class="u-text-center"
							v-for="(item,index) in well_head_list" :key="item.id" @click="selectItem(2,index)">
							{{item.name}}
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="statistics">
			<view class="left-statistics-data statistics-data">
				<view class="statistics-body">{{ yield_num }}</view>
				<view class="title">日产液量/方</view>
			</view>
			<view class="right-statistics-data statistics-data">
				<view class="statistics-body">{{ moistureContent }}</view>
				<view class="title">日平均含水量/%</view>
			</view>
		</view>
		<view class="statistics-view">
			<view class="title">
				数据曲线图
			</view>

			<view class="tabs">
				<u-button 
					:style="{background: activeTime === item.title ?'#0A69FD':'#F5F7F9'}"
					type="info"
					:hair-line="false"
					hover-class="none" 
					v-for="item in selectTimeList" 
					:key="item.id" 
					@tap="changeActive(item)">
					<text class="btn-text" :style="{color: activeTime === item.title ?'#FFFFFF':'#5F636B'}">
						{{ item["title"] }}
					</text>
				</u-button>
			</view>
			
			<view class="echarts-view">
				<echartsView
					title="产量曲线图"
					:activeTime="activeTime"
					color="#0A69FD"
					seriesName='产量'
					echarts_id="one"
					:id="well_head_active"
					:rt="rt"
				>
				</echartsView>
				<view class="line"></view>
				<echartsView
					title="平均含水率曲线图"
					:activeTime="activeTime"
					color="#1BBD6B"
					seriesName='平均含水率'
					echarts_id="two"
					:id="well_head_active"
					:rt="rt"
				>
				</echartsView>
			</view>
			
		</view>

	</view>
</template>

<script>
	import echartsView from "@/_components/echartsView.vue"
	import {
		getPlaceUnit_api,
		getWellHead_api,
		getWellHeadAnalysedData_api
		
	} from "@/service/services.js"

	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {echartsView},

		computed: {


		},

		data() {
			return {
				well_site_active: '',
				well_site_active_title: '',
				well_site_list: [
		
				],
				well_head_active: '',
				well_head_active_title: '',
				well_head_list: [],
				yield_num: 0,
				moistureContent: 0,
				time: new Date(),
				activeTime: "年",
				rt:'y',
				selectTimeList: [
					{
						id: "y",
						title: "年"
					},
					{
						id: "m",
						title: "月"
					},
					{
						id: "w",
						title: "周"
					},
					{
						id: "d",
						title: "日"
					}
				
					
				],
			}
		},

		onReady() {
			this.getPlaceUnitFn()
		},

		mounted() {

		},

		methods: {
			// 查询日产量 and 日平均含水率
			getWellHeadAnalysedDataFn(id){
				 getWellHeadAnalysedData_api({ id: id }).then((res) => {
					this.yield_num = res.data.production||0;
					this.moistureContent = res.data.averageWaterContentRate||0;
				  });
			},
			// 查询井场
			getPlaceUnitFn(){
				getPlaceUnit_api({
					unitType: 1,
					pageIndex: 1,
					pageSize: 300
				}).then(res=>{
					if(res.data.length){
						this.well_site_active = res.data[0].id
						this.well_site_active_title = res.data[0].name
					}
					this.well_site_list = res.data
					this.getWellHeadFn()
				})
			},
			// 查询井口
			getWellHeadFn(){
				getWellHead_api({
					unitId:this.well_site_active
				}).then(res=>{
					if(res.data.length){
						this.getWellHeadAnalysedDataFn(res.data[0].id)
						this.well_head_active = res.data[0].id
						this.well_head_active_title = res.data[0].name
					}
					this.well_head_list = res.data
					
					console.log(res)
				})
			},
			// flag:1 井场 2  井口
			selectItem(flag, index) {
				if(flag===1){
					
					let obj = this.well_site_list[index]||{}
					if(this.well_site_active!==obj.id){
						this.getWellHeadFn()
					}
					this.well_site_active = obj.id
					this.well_site_active_title = obj.name
					console.log(this.well_site_active_title)
					console.log(this.well_site_list[index].name)
					
					
				}else{
					let obj = this.well_head_list[index]||{}
					if(this.well_head_active!==obj.id){
						this.getWellHeadAnalysedDataFn(obj.id)
					}
					this.well_head_active = obj.id
					this.well_head_active_title = obj.name
				}
				this.$refs.uDropdown.close();
			},
			 changeActive(item) {
				 this.rt=item.id
				 this.activeTime = item.title
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		height: 100%;
		width: 100%;
	}

	.index-head {
		z-index: 1001;
		position: fixed;
		width: 100%;
		height: 176upx;
		background: #FFFFFF;
		box-shadow: 0upx -2upx 0upx 0upx rgba(248, 248, 248, 1);
		display: flex;
		align-items: flex-end;
		justify-content: center;

		.head-title {
			
			font-size: 36upx;
			color: #000000;
			line-height: 88upx;
			text-align: center;
			// margin-bottom: 18upx;
		}
	}

	.dropdown {
		z-index: 1000;
		height: 75upx;
		// position: fixed;
		margin-top: 176upx;
		width: 100%;
		background: #ffffff;
		box-shadow: 0px -2upx 0px 0px rgba(248, 248, 248, 1);
	}


	.slot-content {
		padding: 0 18upx;
		background: #FFFFFF;
	}

	.u-text-center {
		line-height: 88upx;
		border-bottom: 1.5px solid #F8F8F8;
		// box-shadow: 0px 1px 0px 0px rgba(255,255,255,1);
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.u-dropdown__menu__item__text {
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.statistics {
		box-sizing: border-box;
		padding: 32upx;
		display: flex;
		justify-content: space-between;
		background: #F8F8F8;
		margin-top: (75+176)upx;

		.statistics-data {
			width: 326upx;
			height: 188upx;
			background: #FFFFFF;
			box-shadow: 0px 8upx 14upx 0px rgba(206, 210, 223, 0.31);
			box-sizing: border-box;
			padding: 32upx;

			.statistics-body {
				font-size: 56upx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #000000;
				line-height: 64upx;

			}

			.title {
				font-size: 28upx;
				font-family: PingFangHK-Regular, PingFangHK;
				font-weight: 400;
				color: #5F636B;
				line-height: 36upx;
				margin-top: 24upx;
			}
		}
	}
	.statistics-view{
		box-sizing: border-box;
		padding-bottom: 20upx;
		.title:before {
		  content: " ";
		  width: 8upx;
		  height: 32upx;
		  background: #0A69FD;
		  display: inline-block;
		  position: relative;
		  top: 5.5upx;
		  margin-right: 16upx;
		}
		.title{
			font-size: 32upx;
			font-family: PingFangHK-Medium, PingFangHK;
			font-weight: 500;
			color: #000000;
			line-height: 44upx;
			margin:28upx 37upx;
		}
		
		.tabs{
			display: flex;
			padding:0 32upx;
			uni-button {
				box-shadow: none;
			}
			.u-btn--bold-border{
				border:none;
			}
			.u-size-default{
				// width: 228upx;
				flex:1;
				height: 80upx;
				border-radius: 8upx;
				margin:0;
				padding:0;
				.btn-text{
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #5F636B;
					display: inline-block;
					width: 100%;
					line-height: 44upx;
					box-sizing: border-box;
				}
			}
			.u-size-default:not(:last-child) .btn-text {
				// border-left:1px solid #C4CEDC;
				border-right:1px solid #C4CEDC;
			}
		}
	}
	.line{
		// height: 5px;
		
		border:1upx solid #E9E9E9;
		// box-shadow: 0px 1px 0px 0px rgba(255,255,255,1);
		width:90%;
		    margin: 0 auto;
		margin-top: 46upx;
	}
</style>
